<script setup lang='ts'>
import OrderHead from './head.vue'
import showOrder from './showOrder.vue';
import {onMounted, ref,onBeforeMount} from 'vue'
import NoFound from '../../components/MainBody/NoInfo/index.vue';
import { useOrdersStore } from '@/store/useOrdersStore';
import { storeToRefs } from 'pinia';
import Pagination from '../../components/MainBody/Pagination/index.vue'

const ordersStore = useOrdersStore()
const {stateOrder} =  storeToRefs(ordersStore)

// 是否有数据？
const noData = ref(false)
//数据长度
const allDataCount = ref(stateOrder.value.length)    

//存放当前页数的数据
const newData:any = ref([])
//根据当前页数，更新数据
const showData = (start:number)=>{
    newData.value = []
    for(let i=start;i<(start+5);i++){
        if(i == stateOrder.value.length){return}
        newData.value.push(stateOrder.value[i])
    }
}


const updatePagin = (Data:any)=>{
    const start = (Data.pagin-1)*5
    showData(start)
}

onBeforeMount(async ()=>{
    //调用仓库获取数据的方法
    await ordersStore.getALlOrderInfo()
    showData(0)
    if(stateOrder.value.length == 0){noData.value=true}
    allDataCount.value = stateOrder.value.length
})




</script>
<template>
<div>
    <div class="h-14 flex items-center">
        <div class="ml-5 text-lg font-bold">
            <span>订单信息</span>
        </div>
    </div>
    <div class="w-full bg-white rounded-lg p-0.5 ">
        <OrderHead bgColor="bg-white" />
        <NoFound v-if="noData" />
        <div v-else>
            <showOrder v-for="(item,index) in newData" :key="index" :orderId="item.orderId" :order-name="item.orderName" :order-phone="item.orderPhone" :order-address="item.orderAddress" :order-time="item.orderTime" :order-state="item.orderState" :bgColor="index%2==0? 'bg-stone-100':'bg-white' " />
            <Pagination :allDataCount="allDataCount" @updatePagin="updatePagin"/>
        </div>

    </div>
</div>
</template>
<style scoped>

</style>